<template>
    <div class="container">
        <div class="header">
            <back :title="title" :tip="1"></back>
        </div>
        <div class="order-container">
            <goodsInfo :data="data"></goodsInfo>
            <div class="order-remarks" @click="openisShow">
                <div class="order-remarks-l">备注</div>
                <div class="order-remarks-r" v-if="textareaText">
                    {{ textareaText }}
                </div>
                <div class="order-remarks-r" v-else>
                    可填写口味偏好等信息
                    <i class="fa fa-angle-right right-icon"></i>
                </div>
            </div>
        </div>
        <div class="submit">
            <div class="submit-l">
                合计<span>￥{{ totalPrice }}</span>
            </div>
            <div class="submit-r" @click="sumbitOrder()">
                <button>提交订单</button>
            </div>
        </div>
        <div class="remarks" v-if="isShow">
            <div class="remarks-container">
                <div class="remarks-icon" @click="isShow = false">
                    <i class="fa fa-close close-icon"></i>
                </div>
                <div class="textarea">
                    <textarea
                        maxlength="50"
                        placeholder="点击输入备注"
                        @input="textLength"
                        v-model="textareaText"
                    ></textarea>
                    <span>{{ valueLength }}/50</span>
                    <button @click="confirm">确定</button>
                </div>
                <div class="remarks-content">
                    <div class="remarks-content-item">
                        <h4>选择推荐内容</h4>
                    </div>
                    <div
                        class="remarks-content-item"
                        v-for="(item, index) in remarksList"
                        :key="index"
                    >
                        <p>{{ item.text }}</p>
                        <input
                            type="radio"
                            class="radio_type"
                            v-model="radioVlue"
                            :value="item.value"
                            @click="getText(item.text)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import back from "../components/Back.vue";
import goodsInfo from "./GoodsInfo.vue";
import { Toast } from "vant";
import http from "../api/http";
import ps, { stringify } from "qs";
export default {
    data() {
        return {
            title: "确定订单",
            remarksList: [
                {
                    text: "不加辣",
                    value: "不加辣",
                },
                {
                    text: "不要葱和香菜",
                    value: "不要葱和香菜",
                },
                {
                    text: "口味加重",
                    value: "口味加重",
                },
            ],
            radioVlue: "", //单选控制
            textareaText: "", //文本内容
            isShow: false, //是否显示备注
            valueLength: 0, //文本长度
            data: [],
            totalPrice: "",
            total: "",
        };
    },
    components: {
        back,
        goodsInfo,
    },
    methods: {
        textLength(e) {
            this.valueLength = e.target.value.length;
        },
        openisShow() {
            this.isShow = !this.isShow;
        },
        confirm() {
            this.isShow = !this.isShow;
        },
        getText(t) {
            console.log(t);
            this.textareaText = t;
            this.valueLength = t.length;
        },
        sumbitOrder() {
            let items = [];
            this.data.list.forEach((item) => {
                console.log(item);
                items.push({
                    productId: item.id,
                    productQuantity: item.count, //购买数量
                    productSpecs: item.specs,
                });
            });
            items = JSON.stringify(items);

            if (this.$route.params.type == 1) {
                let data = {
                    name: "幸福上品",
                    phone: "18868822111",
                    address: "桌号01",
                    openid: "ew3euwhd7sjw9diwkq", //用户的微信openid
                    items: items,
                    orderId: this.data.orderId,
                    orderMark:this.textareaText
                };
                http.post(
                    "/tophappiness/sell/buyer/order/addMore",
                    ps.stringify(data)
                ).then((res) => {
                    console.log(res);
                    if (res.orderId) {
                        this.$store.state.orderData = {}
                        this.$store.state.homeData = []
                        Toast.success("订单追加成功");
                        setTimeout(() => {
                            this.$router.push("/myorder");
                        }, 1000);
                    }
                });
            } else {
                let data = {
                    name: "幸福上品",
                    phone: "18868822111",
                    address: "桌号01",
                    openid: "ew3euwhd7sjw9diwkq", //用户的微信openid
                    items: items,
                    orderMark:this.textareaText
                };
                http.post(
                    "/tophappiness/sell/buyer/order/create",
                    ps.stringify(data)
                ).then((res) => {
                    console.log(res);
                    if (res.orderId) {
                        this.$store.state.homeData = []
                        Toast.success("提交订单成功");
                        setTimeout(() => {
                            this.$router.push("/myorder");
                        }, 1000);
                    }
                });
            }
        },
    },
    created() {
        if (this.$route.params.data) {
            let data = JSON.parse(this.$route.params.data);
            console.log(data);
            this.totalPrice = data.totalPrice;
            this.total = data.total;
            this.textareaText = data.orderMark;
            // console.log(data);
            this.data = data;
        }
        if (this.data == "") {
            this.$router.push("/");
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    .header {
        width: 100%;
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 2;
    }
    .order-container {
        margin-top: 60px;
        padding: @pd-20;
        background: #fff;
        .order-remarks {
            padding: @pd-20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: @bg-h;
            .order-remarks-l {
                font-size: @fs-18;
                color: @c-o;
            }
            .order-remarks-r {
                display: flex;
                align-items: center;
                font-size: @fs-18;
                color: @c-t;
                .right-icon {
                    font-size: @fs-28;
                    margin-left: @pd-10;
                }
            }
        }
    }
    .submit {
        width: 100%;
        height: 80px;
        padding: 0 @pd-20;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: @bg-f;
        box-shadow: 0 0 6px 2px @bg-h;
        box-sizing: border-box;
        .submit-l {
            font-size: @fs-16;
            color: @c-o;
            span {
                font-size: @fs-24;
                font-weight: bold;
            }
        }
        .submit-r {
            button {
                font-size: @fs-18;
                color: #fff;
                padding: @pd-10 @pd-30;
                border-radius: @bd-10;
                background: @c-h;
            }
        }
    }
    .remarks {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.3);
        z-index: 2;
        .remarks-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: @pd-20;
            background: @bg-f;
            border-radius: @bd-10 @bd-10 0 0;
            box-sizing: border-box;
            .remarks-icon {
                text-align: right;
                .close-icon {
                    font-size: @fs-28;
                    color: #ccc;
                }
            }
            .textarea {
                position: relative;
                padding-top: @pd-20;
                textarea {
                    width: 100%;
                    font-size: @fs-16;
                    color: @c-o;
                    padding: @pd-20 @pd-20 80px;
                    box-sizing: border-box;
                    border: 1px solid @bg-h;
                    border-radius: @bd-10;
                    background: @bg-h;
                    resize: none;
                }
                span {
                    position: absolute;
                    bottom: 20px;
                    left: 20px;
                    font-size: @fs-14;
                    color: @c-t;
                }
                button {
                    position: absolute;
                    bottom: 10px;
                    right: 20px;
                    color: @c-f;
                    font-size: @fs-18;
                    padding: @pd-10 @pd-30;
                    border-radius: @bd-10;
                    background: @c-h;
                }
            }
            .remarks-content {
                margin-top: @pd-20;
                .remarks-content-item {
                    border-bottom: 1px solid @bg-h;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: @pd-20 0;
                    &:last-child {
                        border-bottom: none;
                    }
                    h4 {
                        font-size: @fs-18;
                        color: @c-t;
                    }
                    p {
                        font-size: @fs-18;
                        color: @c-o;
                    }
                    .radio_type {
                        width: 30px;
                        height: 30px;
                        appearance: none;
                        position: relative;
                        outline: none;
                    }
                    .radio_type:before {
                        content: "";
                        width: 20px;
                        height: 20px;
                        border: 3px solid @c-t;
                        display: block;
                        border-radius: 50%;
                        // border: 1px solid red;
                    }
                    .radio_type:checked:before {
                        content: "";
                        width: 20px;
                        height: 20px;
                        border: 3px solid @c-h;
                        display: block;
                        border-radius: 50%;
                    }
                    .radio_type:checked:after {
                        position: absolute;
                        content: "";
                        width: 5px;
                        height: 10px;
                        top: 5px;
                        left: 9px;
                        border: 3px solid @c-h;
                        border-top: none;
                        border-left: none;
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
}
</style>